<template>

	<view class="page-body">
		<cu-custom bgColor="bg-white" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>
		</cu-custom>

		<view class="comment-tag" id="head">
			<button :class="commIndex==0?'bg-blue':'bg-gray1'" @click="commChange(0)" class="cu-btn sm">全部
				{{commentList['all'].length}}</button>
			<button :class="commIndex==1?'bg-blue':'bg-gray1'" @click="commChange(1)" class="cu-btn sm">有图
				{{commentList['figure'].length}}</button>
			<button :class="commIndex==2?'bg-blue':'bg-gray1'" @click="commChange(2)" class="cu-btn sm">好评
				{{commentList['high'].length}}</button>
			<button :class="commIndex==3?'bg-blue':'bg-gray1'" @click="commChange(3)" class="cu-btn sm">差评
				{{commentList['bad'].length}}</button>
		</view>
		<view class="comment-list">
			<scroll-view scroll-y="true" style="height: 100%;width: 94%;margin: auto;">
				<uni-evaluate :list-data="commentNow" />

			</scroll-view>

		</view>



	</view>

</template>

<script>
	import uniEvaluate from '@/app/ShopCenter/components/xiujun-evaluate/uni-evaluate.vue';
	export default {
		name: "ComplainList",
		components: {

			uniEvaluate

		},
		data() {
			return {
				title: "评价",
				tabIndex: 0,
				swiperHeight:0,
				commentList: {
					all: [],
					bad: [],
					figure: [],
					high: []
				},
				commIndex: 0,
				commentNow: [],
				shop_id:-1,

			}
		},
		props: {
			params: {
				type: Number,
				default: null
			}
		},
		watch: {
			params(val) {
				console.log("val " + val);
				this.params = val;
				
			}
		},
		
		mounted() {
			this.shop_id=this.params;
			this.getComment(this.shop_id);
			this.getInfo().then((e) => {
				const query = uni.createSelectorQuery().in(this);
				query.select('#head').boundingClientRect(data => {
					this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 50 - data
						.height;
				}).exec();
			})
		},
		methods: {
			commChange(i) {
				this.commIndex = i
				switch (i) {
					case 0:
						this.commentNow = this.commentList.all
						break
					case 1:
						this.commentNow = this.commentList.figure
						break
					case 2:
						this.commentNow = this.commentList.high
						break
					case 3:
						this.commentNow = this.commentList.bad
						break
				}
			},
			getComment(id) {
				this.apiRequest('/buyer/comments', {
					shop_id: this.shop_id,
				}).then(res => {
					this.commentList = res.data;
					this.commentNow = this.commentList.all;
				})
				
			},


		}

	}
</script>

<style>
	.comment-tag {
		display: flex;
		align-items: center;
	}

	.comment-tag button {
		height: 60%;
	}

	.comment-tag {
		width: 100%;
		height: 100upx;
		text-align: center;
		display: flex;
		background: #FFFFFF;
		justify-content: space-around;
		box-shadow: 0px 5upx 20upx 0px rgba(0, 0, 0, 0.05);
	}

	.comment-tag-fixed {
		width: 100%;
		height: 100upx;

		top: 0rpx;
		position: fixed;
		background: #F7F7F7;
		z-index: 99;

	}

	.comment-tag text {
		padding: 5rpx 15rpx;
		background: #EEEEEE;
		border-radius: 20rpx;
		font-size: 24rpx;
		padding: 5rpx 30rpx;
	}

	.comment-tag text.achov {
		background: #1270e0;
		color: #F7F7F7;
	}

	.comment-list {
		width: 100%;
		height: 92vh;
	}
</style>
